<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发现</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
  <script src="{{ url_for('static', filename='js/discover.js') }}"></script>
</head>
<body>
  <div class="container">
    <header class="header">
      <button class="back-btn" onclick="window.history.back()">←</button>
      <h2>发现</h2>
    </header>

    <!-- 精选优惠 -->
    <div class="section">
      <h3>精选优惠</h3>
      <div class="discount-grid">
        <div class="discount-item" onclick="openDiscount('food')">
          <img src="{{ url_for('static', filename='img/ms.png') }}" alt="美食">
          <div class="discount-info">
            <h4>美食5折起</h4>
            <p>精选餐厅优惠</p>
          </div>
        </div>
        <div class="discount-item" onclick="openDiscount('shopping')">
          <img src="{{ url_for('static', filename='img/gw.png') }}" alt="购物">
          <div class="discount-info">
            <h4>购物狂欢节</h4>
            <p>满200减30</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 新人专享 -->
    <div class="section">
      <h3>新人专享</h3>
      <div class="new-user-grid">
        <div class="new-user-item" onclick="openNewUser('coupon')">
          <img src="{{ url_for('static', filename='img/yhq.png') }}" alt="优惠券">
          <div class="new-user-info">
            <h4>新人礼包</h4>
            <p>立减20元</p>
          </div>
        </div>
        <div class="new-user-item" onclick="openNewUser('points')">
          <img src="{{ url_for('static', filename='img/jf.png') }}" alt="积分">
          <div class="new-user-info">
            <h4>积分翻倍</h4>
            <p>首单享3倍积分</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门服务 -->
    <div class="section">
      <h3>热门服务</h3>
      <div class="service-grid">
        <div class="service-item" onclick="openService('movie')">
          <img src="{{ url_for('static', filename='img/dy.png') }}" alt="电影票">
          <p>电影票</p>
        </div>
        <div class="service-item" onclick="openService('hotel')">
          <img src="{{ url_for('static', filename='img/jd.png') }}" alt="酒店">
          <p>酒店</p>
        </div>
        <div class="service-item" onclick="openService('travel')">
          <img src="{{ url_for('static', filename='img/lx.png') }}" alt="旅行">
          <p>旅行</p>
        </div>
        <div class="service-item" onclick="openService('insurance')">
          <img src="{{ url_for('static', filename='img/bx.png') }}" alt="保险">
          <p>保险</p>
        </div>
      </div>
    </div>

    <!-- 附近商家 -->
    <div class="section">
      <h3>附近商家</h3>
      <div class="merchant-list">
        <div class="merchant-item" onclick="openMerchant('starbucks')">
          <img src="{{ url_for('static', filename='img/xbk.png') }}" alt="星巴克">
          <div class="merchant-info">
            <h4>星巴克咖啡</h4>
            <p>0.8km | 满30减5</p>
          </div>
        </div>
        <div class="merchant-item" onclick="openMerchant('kfc')">
          <img src="{{ url_for('static', filename='img/kdj.png') }}" alt="肯德基">
          <div class="merchant-info">
            <h4>肯德基</h4>
            <p>1.2km | 满50减8</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部导航 -->
  <nav class="bottom-nav">
    <a href="/" class="nav-item">
      <img src="{{ url_for('static', filename='img/sy.png') }}" alt="首页">
      <span>首页</span>
    </a>
    <a href="/pay" class="nav-item">
      <img src="{{ url_for('static', filename='img/sfk.png') }}" alt="收付款">
      <span>收付款</span>
    </a>
    <a href="/discover" class="nav-item active">
      <img src="{{ url_for('static', filename='img/fx.png') }}" alt="发现">
      <span>发现</span>
    </a>
    <a href="/profile" class="nav-item">
      <img src="{{ url_for('static', filename='img/wd.png') }}" alt="我的">
      <span>我的</span>
    </a>
    <a href="/more" class="nav-item">
      <img src="{{ url_for('static', filename='img/gd.png') }}" alt="更多">
      <span>更多</span>
    </a>
  </nav>
</body>
</html>